<template>
  <div class="sliderbox" :class="classes">
    <el-button v-if="list.length > slides" class="sliderbox-arrow" @click="handleClick(-1)" :disabled="carouselIndex === 0">
      <i class="iconfont">&#xe915;</i>
    </el-button>
    <el-carousel :autoplay="autoplay" ref="carousel" :height="getHeight" :key="key" indicator-position="none">
      <el-carousel-item v-for="(items,$index) in myList" :key="$index">
        <el-row class="sliderbox-cellbox" :gutter="gutter">
          <el-col
            v-for="(item,index) in items"
            @click.native="handleChange(item)" 
            class="sliderbox-item" :class="{'sliderbox-item-active':item.value != undefined ? (value.value != undefined ? item.value == value.value : item.value == value) : item == value}" 
            :key="item.value" 
            :style="{width:`${100/slides}%`}">
              <div class="sliderbox-item-inner">
                <button type="button" v-if="type == 'normal' && $scopedSlots.default" class="sliderbox-item-default">
                  <slot v-bind="item"></slot>
                </button>
                <slot v-else-if="$scopedSlots.default" v-bind="item"></slot>
                <button type="button" v-else class="sliderbox-item-default">
                  {{item.label || item}}
                </button>
              </div>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
    <el-button v-if="list.length > slides" class="sliderbox-arrow" @click="handleClick(1)" :disabled="carouselIndex === maxIndex || list.length <= 7 ">
      <i class="iconfont">&#xe652;</i>
    </el-button>
  </div>
</template>

<script>
export default {
  componentName: 'ESliderbox',
  props: {
    value: {},
    list: {
      type: Array,
      default () {
        return []
      }
    },
    type: {
      type: String,
      default: 'normal'
    },
    slides: {
      type: Number,
      default: 7
    },
    gutter: {
      type: Number,
      default: 2
    },
    autoplay: {
      type: Boolean,
      default: false
    },
    height: {
      type: String
    }
  },
  computed: {
    classes () {
      return [`sliderbox--${this.type}`, this.list && this.list.length > this.slides ? 'sliderbox-actions' : '']
    },
    getHeight () {
      let defaultHeight = {
        normal: '36px',
        week: '120px'
      }
      return this.height || defaultHeight[this.type]
    },
    myList () { // 数据切块
      let array = []
      if (this.list) {
        for (let i = 0; i < this.list.length;) {
          array.push(this.list.slice(i, i + this.slides))
          i = i + this.slides
        }
      }
      return array
    },
    maxIndex () {
      return Math.ceil(this.list.length / this.slides) - 1
    }
  },
  watch: {
    list () {
      this.key = this.unique()
      this.carouselIndex = 0
      this.$refs.carousel.setActiveItem(0)
    }
  },
  data () {
    return {
      key: this.unique(),
      carouselIndex: 0 // 走马灯当前显示块索引
    }
  },
  methods: {
    handleClick (i) {
      i === 1 && this.$refs.carousel.next()
      i === -1 && this.$refs.carousel.prev()
      this.$nextTick(() => {
        this.carouselIndex = this.$refs.carousel.activeIndex
      })
    },
    handleChange (value) {
      if (value !== this.value) {
        let val = typeof this.value === 'object' ? value : value.value
        this.$emit('input', val).$emit('change', val)
      }
    }
  }
}
</script>
